<template>
  <div class="system-efficiency-report">
    <div class="page-header">
      <div class="header-info">
        <h1>系统效能报告</h1>
        <p>分析系统性能指标和效率优化建议</p>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="generateReport">
          <el-icon><Document /></el-icon>
          生成报告
        </el-button>
        <el-button @click="exportReport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
        <el-button @click="scheduleReport">
          <el-icon><Clock /></el-icon>
          定时报告
        </el-button>
      </div>
    </div>

    <!-- 系统概览 -->
    <div class="system-overview">
      <div class="overview-header">
        <h3>📊 系统效率概览</h3>
        <div class="time-selector">
          <el-select v-model="selectedPeriod" @change="updateData" placeholder="选择时间">
            <el-option label="今天" value="today" />
            <el-option label="本周" value="week" />
            <el-option label="本月" value="month" />
            <el-option label="本季度" value="quarter" />
          </el-select>
        </div>
      </div>

      <div class="efficiency-metrics">
        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-icon">⚡</div>
            <div class="metric-title">系统响应时间</div>
          </div>
          <div class="metric-value">{{ currentMetrics.responseTime }}ms</div>
          <div class="metric-trend" :class="currentMetrics.responseTimeTrend">
            {{ currentMetrics.responseTimeTrend === 'up' ? '↑' : '↓' }} 
            {{ currentMetrics.responseTimeChange }}%
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-icon">🎯</div>
            <div class="metric-title">检测准确率</div>
          </div>
          <div class="metric-value">{{ currentMetrics.accuracy }}%</div>
          <div class="metric-trend" :class="currentMetrics.accuracyTrend">
            {{ currentMetrics.accuracyTrend === 'up' ? '↑' : '↓' }} 
            {{ currentMetrics.accuracyChange }}%
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-icon">📈</div>
            <div class="metric-title">系统吞吐量</div>
          </div>
          <div class="metric-value">{{ formatNumber(currentMetrics.throughput) }}</div>
          <div class="metric-trend" :class="currentMetrics.throughputTrend">
            {{ currentMetrics.throughputTrend === 'up' ? '↑' : '↓' }} 
            {{ currentMetrics.throughputChange }}%
          </div>
        </div>

        <div class="metric-card">
          <div class="metric-header">
            <div class="metric-icon">💾</div>
            <div class="metric-title">资源利用率</div>
          </div>
          <div class="metric-value">{{ currentMetrics.resourceUsage }}%</div>
          <div class="metric-trend" :class="currentMetrics.resourceUsageTrend">
            {{ currentMetrics.resourceUsageTrend === 'up' ? '↑' : '↓' }} 
            {{ currentMetrics.resourceUsageChange }}%
          </div>
        </div>
      </div>
    </div>

    <!-- 性能分析 -->
    <div class="performance-analysis">
      <div class="analysis-section">
        <h3>📊 性能趋势分析</h3>
        <div class="chart-container">
          <div ref="performanceChart" class="chart"></div>
        </div>
      </div>

      <div class="analysis-section">
        <h3>🔍 瓶颈分析</h3>
        <div class="bottleneck-list">
          <div v-for="bottleneck in bottlenecks" :key="bottleneck.id" class="bottleneck-item">
            <div class="bottleneck-header">
              <div class="bottleneck-type" :class="bottleneck.severity">
                {{ bottleneck.type }}
              </div>
              <div class="bottleneck-impact">影响程度: {{ bottleneck.impact }}</div>
            </div>
            <div class="bottleneck-desc">{{ bottleneck.description }}</div>
            <div class="bottleneck-solution">
              <strong>解决方案:</strong> {{ bottleneck.solution }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 组件性能 -->
    <div class="component-performance">
      <h3>🧩 组件性能详情</h3>
      <div class="component-grid">
        <div v-for="component in components" :key="component.name" class="component-card">
          <div class="component-header">
            <div class="component-name">{{ component.name }}</div>
            <div class="component-status" :class="component.status">
              {{ getStatusText(component.status) }}
            </div>
          </div>
          
          <div class="component-metrics">
            <div class="component-metric">
              <span class="metric-label">响应时间</span>
              <span class="metric-value">{{ component.responseTime }}ms</span>
            </div>
            <div class="component-metric">
              <span class="metric-label">成功率</span>
              <span class="metric-value">{{ component.successRate }}%</span>
            </div>
            <div class="component-metric">
              <span class="metric-label">错误率</span>
              <span class="metric-value">{{ component.errorRate }}%</span>
            </div>
            <div class="component-metric">
              <span class="metric-label">CPU使用率</span>
              <span class="metric-value">{{ component.cpuUsage }}%</span>
            </div>
          </div>

          <div class="component-progress">
            <div class="progress-item">
              <span class="progress-label">负载</span>
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: component.load + '%' }"></div>
              </div>
              <span class="progress-value">{{ component.load }}%</span>
            </div>
          </div>

          <div class="component-actions">
            <el-button size="small" @click="viewComponentDetails(component)">详情</el-button>
            <el-button size="small" type="primary" @click="optimizeComponent(component)">优化</el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 资源监控 -->
    <div class="resource-monitoring">
      <h3>🖥️ 资源监控</h3>
      <div class="resource-charts">
        <div class="resource-chart">
          <h4>CPU 使用率</h4>
          <div ref="cpuChart" class="chart"></div>
        </div>
        <div class="resource-chart">
          <h4>内存使用率</h4>
          <div ref="memoryChart" class="chart"></div>
        </div>
        <div class="resource-chart">
          <h4>磁盘 I/O</h4>
          <div ref="diskChart" class="chart"></div>
        </div>
        <div class="resource-chart">
          <h4>网络流量</h4>
          <div ref="networkChart" class="chart"></div>
        </div>
      </div>
    </div>

    <!-- 优化建议 -->
    <div class="optimization-suggestions">
      <h3>💡 系统优化建议</h3>
      <div class="suggestions-grid">
        <div class="suggestion-category">
          <h4>性能优化</h4>
          <ul class="suggestion-list">
            <li v-for="suggestion in optimizationSuggestions.performance" :key="suggestion.id" class="suggestion-item">
              <div class="suggestion-content">
                <div class="suggestion-title">{{ suggestion.title }}</div>
                <div class="suggestion-desc">{{ suggestion.description }}</div>
              </div>
              <div class="suggestion-priority" :class="suggestion.priority">
                {{ getPriorityText(suggestion.priority) }}
              </div>
            </li>
          </ul>
        </div>

        <div class="suggestion-category">
          <h4>资源优化</h4>
          <ul class="suggestion-list">
            <li v-for="suggestion in optimizationSuggestions.resource" :key="suggestion.id" class="suggestion-item">
              <div class="suggestion-content">
                <div class="suggestion-title">{{ suggestion.title }}</div>
                <div class="suggestion-desc">{{ suggestion.description }}</div>
              </div>
              <div class="suggestion-priority" :class="suggestion.priority">
                {{ getPriorityText(suggestion.priority) }}
              </div>
            </li>
          </ul>
        </div>

        <div class="suggestion-category">
          <h4>架构优化</h4>
          <ul class="suggestion-list">
            <li v-for="suggestion in optimizationSuggestions.architecture" :key="suggestion.id" class="suggestion-item">
              <div class="suggestion-content">
                <div class="suggestion-title">{{ suggestion.title }}</div>
                <div class="suggestion-desc">{{ suggestion.description }}</div>
              </div>
              <div class="suggestion-priority" :class="suggestion.priority">
                {{ getPriorityText(suggestion.priority) }}
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 报告总结 -->
    <div class="report-summary">
      <h3>📋 报告总结</h3>
      <div class="summary-content">
        <div class="summary-section">
          <h4>系统整体评估</h4>
          <div class="overall-score">
            <div class="score-circle">
              <div class="score-value">{{ overallScore }}</div>
              <div class="score-label">综合评分</div>
            </div>
            <div class="score-details">
              <div class="score-item">
                <span class="score-name">性能指标</span>
                <span class="score-points">{{ performanceScore }}/100</span>
              </div>
              <div class="score-item">
                <span class="score-name">稳定性</span>
                <span class="score-points">{{ stabilityScore }}/100</span>
              </div>
              <div class="score-item">
                <span class="score-name">资源利用</span>
                <span class="score-points">{{ resourceScore }}/100</span>
              </div>
            </div>
          </div>
        </div>

        <div class="summary-section">
          <h4>主要发现</h4>
          <ul class="findings-list">
            <li v-for="finding in keyFindings" :key="finding.id" class="finding-item">
              <div class="finding-type" :class="finding.type">{{ finding.type }}</div>
              <div class="finding-text">{{ finding.text }}</div>
            </li>
          </ul>
        </div>

        <div class="summary-section">
          <h4>下一步行动</h4>
          <ul class="actions-list">
            <li v-for="action in nextActions" :key="action.id" class="action-item">
              <div class="action-priority" :class="action.priority">{{ getPriorityText(action.priority) }}</div>
              <div class="action-text">{{ action.text }}</div>
              <div class="action-deadline">截止：{{ action.deadline }}</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Download, Clock } from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// 图表引用
const performanceChart = ref(null)
const cpuChart = ref(null)
const memoryChart = ref(null)
const diskChart = ref(null)
const networkChart = ref(null)

// 图表实例
let performanceChartInstance = null
let cpuChartInstance = null
let memoryChartInstance = null
let diskChartInstance = null
let networkChartInstance = null

// 时间选择器
const selectedPeriod = ref('today')

// 当前指标
const currentMetrics = reactive({
  responseTime: 245,
  responseTimeTrend: 'down',
  responseTimeChange: 12.5,
  accuracy: 94.7,
  accuracyTrend: 'up',
  accuracyChange: 2.3,
  throughput: 15600,
  throughputTrend: 'up',
  throughputChange: 18.5,
  resourceUsage: 68,
  resourceUsageTrend: 'up',
  resourceUsageChange: 5.2
})

// 瓶颈分析
const bottlenecks = ref([
  {
    id: 1,
    type: 'API网关',
    severity: 'high',
    impact: '高',
    description: 'API网关响应时间过长，平均延迟超过300ms',
    solution: '增加网关实例数量，优化负载均衡策略'
  },
  {
    id: 2,
    type: '数据库连接',
    severity: 'medium',
    impact: '中',
    description: '数据库连接池使用率过高，峰值达到85%',
    solution: '扩大连接池大小，优化数据库查询语句'
  },
  {
    id: 3,
    type: '内存使用',
    severity: 'low',
    impact: '低',
    description: '部分服务内存使用率较高，可能存在内存泄漏',
    solution: '定期重启服务，排查内存泄漏问题'
  }
])

// 组件性能
const components = ref([
  {
    name: '用户认证服务',
    status: 'healthy',
    responseTime: 120,
    successRate: 99.8,
    errorRate: 0.2,
    cpuUsage: 45,
    load: 60
  },
  {
    name: '检测引擎',
    status: 'warning',
    responseTime: 380,
    successRate: 98.5,
    errorRate: 1.5,
    cpuUsage: 78,
    load: 85
  },
  {
    name: '数据处理服务',
    status: 'healthy',
    responseTime: 200,
    successRate: 99.2,
    errorRate: 0.8,
    cpuUsage: 52,
    load: 68
  },
  {
    name: '通知服务',
    status: 'critical',
    responseTime: 450,
    successRate: 96.8,
    errorRate: 3.2,
    cpuUsage: 92,
    load: 95
  }
])

// 优化建议
const optimizationSuggestions = reactive({
  performance: [
    {
      id: 1,
      title: '优化API响应时间',
      description: '通过缓存机制减少数据库查询次数',
      priority: 'high'
    },
    {
      id: 2,
      title: '改进算法效率',
      description: '优化检测算法，提高处理速度',
      priority: 'medium'
    },
    {
      id: 3,
      title: '启用CDN加速',
      description: '为静态资源配置CDN提升访问速度',
      priority: 'low'
    }
  ],
  resource: [
    {
      id: 4,
      title: '扩展服务器资源',
      description: '增加CPU和内存配置以应对高负载',
      priority: 'high'
    },
    {
      id: 5,
      title: '优化数据库索引',
      description: '建立合适的索引提高查询效率',
      priority: 'medium'
    },
    {
      id: 6,
      title: '清理日志文件',
      description: '定期清理过期日志释放磁盘空间',
      priority: 'low'
    }
  ],
  architecture: [
    {
      id: 7,
      title: '实施微服务架构',
      description: '拆分单体应用提高系统可扩展性',
      priority: 'high'
    },
    {
      id: 8,
      title: '引入消息队列',
      description: '使用消息队列处理异步任务',
      priority: 'medium'
    },
    {
      id: 9,
      title: '容器化部署',
      description: '使用Docker容器化提高部署效率',
      priority: 'low'
    }
  ]
})

// 评分数据
const overallScore = ref(78)
const performanceScore = ref(82)
const stabilityScore = ref(75)
const resourceScore = ref(77)

// 关键发现
const keyFindings = ref([
  {
    id: 1,
    type: 'warning',
    text: '检测引擎在高峰期响应时间超过阈值，需要优化处理能力'
  },
  {
    id: 2,
    type: 'success',
    text: '用户认证服务表现良好，稳定性和性能指标均达标'
  },
  {
    id: 3,
    type: 'danger',
    text: '通知服务存在严重性能问题，CPU使用率过高'
  }
])

// 下一步行动
const nextActions = ref([
  {
    id: 1,
    priority: 'high',
    text: '紧急优化通知服务，降低CPU使用率',
    deadline: '2024-01-20'
  },
  {
    id: 2,
    priority: 'medium',
    text: '扩展检测引擎处理能力，提升吞吐量',
    deadline: '2024-01-25'
  },
  {
    id: 3,
    priority: 'low',
    text: '制定系统监控告警机制',
    deadline: '2024-01-30'
  }
])

// 方法
const formatNumber = (number) => {
  if (number >= 1000000) {
    return (number / 1000000).toFixed(1) + 'M'
  } else if (number >= 1000) {
    return (number / 1000).toFixed(1) + 'K'
  }
  return number.toString()
}

const getStatusText = (status) => {
  const statusMap = {
    healthy: '健康',
    warning: '警告',
    critical: '严重'
  }
  return statusMap[status] || status
}

const getPriorityText = (priority) => {
  const priorityMap = {
    high: '高优先级',
    medium: '中优先级',
    low: '低优先级'
  }
  return priorityMap[priority] || priority
}

const updateData = () => {
  ElMessage.success('数据已更新')
}

const generateReport = () => {
  ElMessage.success('正在生成系统效能报告...')
}

const exportReport = () => {
  ElMessage.success('正在导出报告...')
}

const scheduleReport = () => {
  ElMessage.success('已设置定时报告')
}

const viewComponentDetails = (component) => {
  ElMessage.info(`查看组件详情: ${component.name}`)
}

const optimizeComponent = (component) => {
  ElMessage.info(`开始优化组件: ${component.name}`)
}

// 初始化性能趋势图表
const initPerformanceChart = () => {
  if (!performanceChart.value) return
  
  performanceChartInstance = echarts.init(performanceChart.value)
  
  const option = {
    title: {
      text: '系统性能趋势',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['响应时间', '吞吐量', 'CPU使用率'],
      top: 30
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    },
    yAxis: [
      {
        type: 'value',
        name: '响应时间(ms)',
        position: 'left'
      },
      {
        type: 'value',
        name: '吞吐量/CPU%',
        position: 'right'
      }
    ],
    series: [
      {
        name: '响应时间',
        type: 'line',
        data: [180, 220, 380, 420, 350, 280],
        smooth: true,
        itemStyle: { color: '#e74c3c' }
      },
      {
        name: '吞吐量',
        type: 'bar',
        yAxisIndex: 1,
        data: [12, 15, 18, 22, 20, 16],
        itemStyle: { color: '#3498db' }
      },
      {
        name: 'CPU使用率',
        type: 'line',
        yAxisIndex: 1,
        data: [45, 52, 68, 75, 72, 58],
        smooth: true,
        itemStyle: { color: '#f39c12' }
      }
    ]
  }
  
  performanceChartInstance.setOption(option)
}

// 初始化CPU图表
const initCpuChart = () => {
  if (!cpuChart.value) return
  
  cpuChartInstance = echarts.init(cpuChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: 'CPU使用率',
        type: 'line',
        data: [35, 42, 58, 68, 62, 48],
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(52, 152, 219, 0.3)' },
            { offset: 1, color: 'rgba(52, 152, 219, 0.1)' }
          ])
        },
        itemStyle: { color: '#3498db' }
      }
    ]
  }
  
  cpuChartInstance.setOption(option)
}

// 初始化内存图表
const initMemoryChart = () => {
  if (!memoryChart.value) return
  
  memoryChartInstance = echarts.init(memoryChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: '内存使用率',
        type: 'line',
        data: [60, 65, 72, 78, 75, 68],
        smooth: true,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(46, 204, 113, 0.3)' },
            { offset: 1, color: 'rgba(46, 204, 113, 0.1)' }
          ])
        },
        itemStyle: { color: '#2ecc71' }
      }
    ]
  }
  
  memoryChartInstance.setOption(option)
}

// 初始化磁盘图表
const initDiskChart = () => {
  if (!diskChart.value) return
  
  diskChartInstance = echarts.init(diskChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} MB/s'
      }
    },
    series: [
      {
        name: '磁盘I/O',
        type: 'bar',
        data: [25, 32, 45, 58, 52, 38],
        itemStyle: { color: '#e67e22' }
      }
    ]
  }
  
  diskChartInstance.setOption(option)
}

// 初始化网络图表
const initNetworkChart = () => {
  if (!networkChart.value) return
  
  networkChartInstance = echarts.init(networkChart.value)
  
  const option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['入网流量', '出网流量']
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value} Mbps'
      }
    },
    series: [
      {
        name: '入网流量',
        type: 'line',
        data: [120, 150, 180, 220, 200, 160],
        smooth: true,
        itemStyle: { color: '#9b59b6' }
      },
      {
        name: '出网流量',
        type: 'line',
        data: [80, 95, 110, 140, 130, 100],
        smooth: true,
        itemStyle: { color: '#e74c3c' }
      }
    ]
  }
  
  networkChartInstance.setOption(option)
}

// 生命周期
onMounted(() => {
  setTimeout(() => {
    initPerformanceChart()
    initCpuChart()
    initMemoryChart()
    initDiskChart()
    initNetworkChart()
  }, 100)
})

onUnmounted(() => {
  if (performanceChartInstance) {
    performanceChartInstance.dispose()
  }
  if (cpuChartInstance) {
    cpuChartInstance.dispose()
  }
  if (memoryChartInstance) {
    memoryChartInstance.dispose()
  }
  if (diskChartInstance) {
    diskChartInstance.dispose()
  }
  if (networkChartInstance) {
    networkChartInstance.dispose()
  }
})
</script>

<style scoped>
.system-efficiency-report {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.header-info h1 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 28px;
}

.header-info p {
  margin: 0;
  color: #666;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.system-overview {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.overview-header h3 {
  margin: 0;
  color: #333;
  font-size: 18px;
}

.efficiency-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.metric-card {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.metric-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

.metric-icon {
  font-size: 24px;
}

.metric-title {
  font-size: 14px;
  color: #666;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.metric-trend {
  font-size: 12px;
  font-weight: bold;
}

.metric-trend.up {
  color: #f56c6c;
}

.metric-trend.down {
  color: #67c23a;
}

.performance-analysis {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 30px;
}

.analysis-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.analysis-section h3 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.chart-container {
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

.bottleneck-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.bottleneck-item {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.bottleneck-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.bottleneck-type {
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.bottleneck-type.high {
  background: #fff3cd;
  color: #856404;
}

.bottleneck-type.medium {
  background: #d1ecf1;
  color: #0c5460;
}

.bottleneck-type.low {
  background: #d4edda;
  color: #155724;
}

.bottleneck-impact {
  font-size: 12px;
  color: #666;
}

.bottleneck-desc {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  line-height: 1.4;
}

.bottleneck-solution {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.component-performance {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.component-performance h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
}

.component-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.component-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #409eff;
}

.component-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.component-name {
  font-weight: bold;
  color: #333;
}

.component-status {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.component-status.healthy {
  background: #d4edda;
  color: #155724;
}

.component-status.warning {
  background: #fff3cd;
  color: #856404;
}

.component-status.critical {
  background: #f8d7da;
  color: #721c24;
}

.component-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 15px;
}

.component-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-label {
  font-size: 12px;
  color: #666;
}

.metric-value {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.component-progress {
  margin-bottom: 15px;
}

.progress-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.progress-label {
  width: 40px;
  font-size: 12px;
  color: #666;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #e9ecef;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #67c23a);
  transition: width 0.3s ease;
}

.progress-value {
  width: 30px;
  text-align: right;
  font-size: 12px;
  color: #666;
}

.component-actions {
  display: flex;
  gap: 10px;
}

.resource-monitoring {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.resource-monitoring h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
}

.resource-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.resource-chart {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.resource-chart h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 14px;
}

.optimization-suggestions {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 30px;
}

.optimization-suggestions h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
}

.suggestions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.suggestion-category {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.suggestion-category h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 14px;
}

.suggestion-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.suggestion-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px;
  margin-bottom: 10px;
  background: white;
  border-radius: 4px;
  border-left: 3px solid #409eff;
}

.suggestion-content {
  flex: 1;
}

.suggestion-title {
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.suggestion-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4;
}

.suggestion-priority {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  margin-left: 10px;
}

.suggestion-priority.high {
  background: #fff3cd;
  color: #856404;
}

.suggestion-priority.medium {
  background: #d1ecf1;
  color: #0c5460;
}

.suggestion-priority.low {
  background: #d4edda;
  color: #155724;
}

.report-summary {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.report-summary h3 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 16px;
}

.summary-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 20px;
}

.summary-section {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
}

.summary-section h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 14px;
}

.overall-score {
  display: flex;
  align-items: center;
  gap: 20px;
}

.score-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #409eff, #67c23a);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

.score-value {
  font-size: 24px;
  font-weight: bold;
}

.score-label {
  font-size: 12px;
}

.score-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid #e9ecef;
}

.score-name {
  font-size: 14px;
  color: #666;
}

.score-points {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.findings-list, .actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.finding-item, .action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: white;
  border-radius: 4px;
}

.finding-type, .action-priority {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  min-width: 60px;
  text-align: center;
}

.finding-type.success, .action-priority.low {
  background: #d4edda;
  color: #155724;
}

.finding-type.warning, .action-priority.medium {
  background: #fff3cd;
  color: #856404;
}

.finding-type.danger, .action-priority.high {
  background: #f8d7da;
  color: #721c24;
}

.finding-text, .action-text {
  flex: 1;
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.action-deadline {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 15px;
  }
  
  .efficiency-metrics {
    grid-template-columns: 1fr;
  }
  
  .performance-analysis {
    grid-template-columns: 1fr;
  }
  
  .component-grid {
    grid-template-columns: 1fr;
  }
  
  .resource-charts {
    grid-template-columns: 1fr;
  }
  
  .suggestions-grid {
    grid-template-columns: 1fr;
  }
  
  .summary-content {
    grid-template-columns: 1fr;
  }
}
</style> 